import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:speed_random/app_styles.dart';
import 'package:speed_random/pages/home/rand_num/num_results/view.dart';
import 'package:speed_random/pages/home/rand_num/view_set.dart';
import 'package:speed_random/widgets/row_two_buttons.dart';

import 'logic.dart';
import 'state.dart';


class RandNumPage extends StatelessWidget {
  RandNumPage({Key? key}) : super(key: key);

  final RandNumLogic logic = Get.put(RandNumLogic());
  final RandNumState state = Get.find<RandNumLogic>().state;



  @override
  Widget build(BuildContext context) {
    final fontSizes=[
      200,
      400,
      250,
      180,
      140,
      110,

    ];
    return Scaffold(
      appBar: AppBar(
        title: Text('随机数生成器'.tr),
       // backgroundColor: AppStyles.colorAppBarbg,
        actions: [
          IconButton(
            icon: const Icon(Icons.history),
            onPressed: () {
              Get.to(() => NumResultsPage()); // 跳转到历史页面
            },
          ),
        ],
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            // 显示当前设置
            Expanded(child: Card(
              color: AppStyles.colorPagebg,
          // 使用 Obx 响应式组件
          child: Obx(() =>
          state.randomNumbers.length<2?
          Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // 遍历 state.randomNumbers 列表，为每个元素创建一个 Text 组件
              ...state.randomNumbers.map((number) => Text(
                '$number',
                style: TextStyle(
                    fontSize:fontSizes[number.toString().length]*1,
                    color: AppStyles.colorPageText,
                    fontWeight: FontWeight.bold
                ),
              )).toList()
            ],
          )
              :
          GridView.builder(
            // 限制滚动，避免与 Scaffold 滚动冲突
            shrinkWrap: true,
            // 每行显示 2 列
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
              // 水平间距
              crossAxisSpacing: 8.0,
              // 垂直间距
              mainAxisSpacing: 8.0,
            ),
            // 设置列表项数量
            itemCount: state.randomNumbers.length,
            // 构建每个列表项
            itemBuilder: (context, index) {
              final number = state.randomNumbers[index];
              final indexnum = index+1;
              return Center(
                child: Container(
                  // 添加边框
                  decoration: BoxDecoration(

                    border: Border.all(
                      color: AppStyles.colorPageText,
                      width: 1,
                    ),
                    borderRadius: BorderRadius.circular(8),
                  ),
                  padding: const EdgeInsets.all(5),
                  margin:  EdgeInsets.only(left: index%2==0?10:0, right: index%2==0?0:10, top: 10, bottom: 0),
                  child: Stack(
                    children: [
                      Center(
                        child: Text(
                          '$number',
                          style: TextStyle(
                            fontSize: 40,
                            color: AppStyles.colorPageText,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),
                      // 左上角显示 index 小标
                      Positioned(
                        top: 0,
                        left: 0,
                        child: Container(
                          padding: const EdgeInsets.all(4),
                          /*decoration: BoxDecoration(
                            color: AppStyles.colorAppBarbg,
                            shape: BoxShape.circle,
                          ),*/
                          child: Text(
                            '$indexnum',
                            style: TextStyle(
                              fontSize: 10,
                              color: Colors.black,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),

              );
            },
          ),

          ),
              ),
            ),
            const SizedBox(height: 10),

            // 显示随机数总和
            Obx(() => !state.isShowSum.value?SizedBox():Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    '总数'.tr+': ${state.randomNumbers.value.length}',
                    style: TextStyle(
                      fontSize: 20,
                      color: AppStyles.colorPageText,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  Text(
                    '总和'.tr+': ${state.randomNumbersSum.value}',
                    style: TextStyle(
                      fontSize: 20,
                      color: AppStyles.colorPageText,
                      fontWeight: FontWeight.bold,
                    ),
                  )
                ],
              ),),



            /*底部状态按钮*/

            Obx(()=>rowRunOrSetButtons(
              isRun:state.isRun.value ,
              isManualStop:state.isManualStop.value ,
              onGetRandomNumPressed: () {
                logic.generateRandomNumbers();
              },
              onSettingsPressed: () {
                // 导航到设置页面
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => SettingsPage(logic: logic, state: state),
                  ),
                );
                // showSettingsDialog(context);
              },
              onOkPressed: (){
                state.isRun.value=0;
              },
              onStopPressed: (){
                state.isRun.value=2;
              },
            ),),
            /*底部状态按钮*/
            const SizedBox(height: 16),
          ],
        ),
      ),
    );
  }



}


